import React, { PureComponent, Fragment } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { connect } from 'dva';
import Packing from './packInfo';

@connect(({ packing }) => ({
  packing,
}))
export default class StepForm extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      obj: {},
      fileList: [],
      borrowList: [],
    };

  }

  componentDidMount() {
    const { projectNo } = this.props.location.query;
    this.getDesc(projectNo);
  }

  getDesc(projectNo) {
    let _this = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'packing/getDesc',
      payload: projectNo,
      callback() {
        _this.checkStatus();
      },
    });
  }

  checkStatus() {

    const { location, packing: { descDatas }, dispatch } = this.props;
    const { type } = location.query;

    let obj = {
      ...descDatas.detail, ...descDatas.project, ...descDatas.borrow,
    };
    this.setState({
      obj: obj,
      borrowList: { ...descDatas.borrow },
    });
    if (type !== 'packing') {
      let arr = [];
      if (obj.relateData) {
        obj.relateData.split(',').map((item, index) => {
          let arr1 = {
            name: item,
            url: item,
            uid: index,
          };
          if (item) {
            arr.push(arr1);
          }
        });
        dispatch({
          type: 'packing/uploadData',
          payload: arr,
        });
      } else {
        dispatch({
          type: 'packing/uploadData',
          payload: [],
        });
      }
    } else {
      dispatch({
        type: 'packing/uploadData',
        payload: [],
      });
    }

  }

  render() {
    const { location } = this.props;
    const { obj, fileList } = this.state;
    const { type } = location.query;
    return (
      <PageHeaderWrapper
        title="包装产品"
        tabActiveKey={location.pathname}
      >
        <Packing obj={obj ? obj : ''} fileList={fileList} type={type}/>
      </PageHeaderWrapper>
    );
  }
}
